// 颜色
$primary-color: #1890ff;
$success-color: #52c41a;
$warning-color: #faad14;
$danger-color: #f5222d;
$info-color: #1890ff;

// 文本颜色
$text-color: #333333;
$text-color-secondary: #666666;
$text-color-light: #999999;

// 背景颜色
$bg-color: #ffffff;
$bg-color-light: #f5f5f5;
$bg-color-dark: #f0f2f5;

// 边框颜色
$border-color: #e8e8e8;
$border-color-dark: #d9d9d9;

// 字体
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';
$font-size-base: 14px;
$font-size-sm: 12px;
$font-size-lg: 16px;
$font-size-xl: 20px;

// 行高
$line-height-base: 1.5;
$line-height-lg: 2;
$line-height-sm: 1.2;

// 间距
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;

// 边框圆角
$border-radius-sm: 2px;
$border-radius: 4px;
$border-radius-lg: 8px;

// 断点
$breakpoints: (
  'xs': 576px,
  'sm': 768px,
  'md': 992px,
  'lg': 1200px,
  'xl': 1600px
);

// z-index
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 动画
$animation-duration-base: 0.2s;
$animation-duration-slow: 0.3s;
$animation-duration-slower: 0.45s;

// 阴影
$box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15);
$box-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12);
$box-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.15);

// 过渡
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-fast: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);

// 背景色变量
$bg-color-overlay: var(--el-bg-color-overlay);
$bg-color-page: var(--el-bg-color-page);

// 文字颜色
$text-color-primary: var(--el-text-color-primary);
$text-color-regular: var(--el-text-color-regular);
$text-color-placeholder: var(--el-text-color-placeholder);

// 边框颜色
$border-color-light: var(--el-border-color-light);
$border-color-lighter: var(--el-border-color-lighter);
$border-color-extra-light: var(--el-border-color-extra-light);

// 字体大小
$font-size-extra-large: var(--el-font-size-extra-large);
$font-size-medium: var(--el-font-size-medium);
$font-size-extra-small: var(--el-font-size-extra-small);

// 间距
$spacing-mini: 4px;
$spacing-base: 12px;
$spacing-extra-large: 32px;

// 圆角
$border-radius-base: 4px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 阴影
$box-shadow: var(--el-box-shadow);
$box-shadow-dark: var(--el-box-shadow-dark);

// 过渡
$transition-all: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-base: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

// 布局
$header-height: 60px;
$sidebar-width: 200px;
$sidebar-collapsed-width: 64px; 